<template>
  <div>

    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标识
            </div>
          </el-col>
          <el-col :span="18">
           <select-model :model.sync="store.current.model"></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              组件风格
            </div>
          </el-col>
          <el-col :span="18">
            <el-select clearable v-model="store.current.className" placeholder="请选择">
              <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标题
            </div>
          </el-col>
          <el-col :span="18">
            <el-input v-model="store.current.options.label" placeholder="label"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              默认值
            </div>
          </el-col>
          <el-col :span="18">
            <el-input clearable v-model="store.current.options.defaultValue" placeholder="输入默认值"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              选项配置
            </div>
          </el-col>
          <el-col :span="18">
            <el-button icon="el-icon-plus" @click="addCol" circle></el-button>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-row :gutter="10" v-for="(col,index) in store.current.options.options" :key="index">
                <el-col :span="6">
                  <el-input v-model="col.value"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-input v-model="col.label"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-delete" @click="deleteCol(index)" circle></el-button>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              操作属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-switch active-text='禁用' v-model="store.current.options.disabled"></el-switch>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <div class="prop-set-title">事件名称</div>
          </el-col>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.eventCode"
              clearable
              placeholder="请选择事件名称"
            >
              <el-option
                v-for="trigger in store.eventCollection"
                :key="trigger.value"
                :label="trigger.label"
                :value="trigger.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>


      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config :store='store'></form-config>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import formConfig from "@/low-code/setting/form-config/index.vue"
  import clone from 'clone'
  export default {
    inject: ['getStore'],
    components: { formConfig },
    data () {
      return {
        active: 'first',
        classList: [
          {
            label: '样式一',
            value: 'radio-genre-1'
          },
          {
            label: '样式二',
            value: 'radio-genre-2'
          }
        ]
      }
    },
    watch: {
      "store.current.options": {
        handler () { //特别注意，不能用箭头函数，箭头函数，this指向全局
          this.$handleStack.push(clone(this.store.root))
        },
        // immediate: true,  //刷新加载 立马触发一次handler
        deep: true  // 可以深度检测到 obj 对象的属性值的变化
      }
    },
    methods: {
      addCol () {
        this.store.current.options.options.push({
          value: this.store.current.options.options.length,
          label: '备选项'
        })
      },
      deleteCol (index) {
        this.store.current.options.options.splice(index, 1)
      }
    },
    computed: {
      store () {
        return this.getStore()
      }
    }

  }
</script>

<style  scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
::v-deep .el-button.is-circle {
  padding: 8px !important;
}
</style>